<template>
    <div class="app-container">
        <el-form ref="queryParamsRef" :model="queryParams" label-position="left" :inline="true">
            <el-form-item label="状态：" prop="state">
                <el-select v-model="queryParams.state" clearable @change="getList" style="width: 10rem;">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in nj_recept_state" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="任务下发时间：">
                <el-date-picker v-model="searchTime" type="daterange" range-separator="-" start-placeholder="开始时间"
                    end-placeholder="截止时间" value-format="YYYY-MM-DD" @change="changeDateTimerHandle" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList">
                    <el-icon class="me-1">
                        <Search />
                    </el-icon>
                    查询
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                    <el-icon class="me-1">
                        <Refresh />
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-divider class="mt-0" />

        <el-table :data="tableData" v-loading="loading" border stripe
        :row-style="tableRowStyle" @row-dblclick="handleDbClick">
            <el-table-column prop="adduser_id" label="任务下发人" width="180" />
            <el-table-column prop="receiver_id" label="任务接收人" width="180" />
            <el-table-column prop="adddate" label="任务下发时间" width="200" />
            <el-table-column prop="receivedate" label="接收时间" width="200" />
            <el-table-column prop="taskcontent" label="任务内容" />
            <el-table-column prop="stateText" label="状态" width="180" />
            <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                    <el-button type="primary" size="small" link v-if="scope.row.state === TaskEnum.TOBE_RECEIVED"
                        @click="acceptTaskHandle(scope.row)">
                        <el-icon class="me-1">
                            <CircleCheck />
                        </el-icon>
                        接收
                    </el-button>
                    <el-button type="primary" size="small" link @click="finishTaskRef.showFinishTask(scope.row)"
                        v-if="scope.row.state === TaskEnum.PROCESSING">
                        <el-icon class="me-1">
                            <CircleCheck />
                        </el-icon>
                        处理
                    </el-button>
                    <el-button type="primary" size="small" link
                        @click="executeFireActionTaskDetailRef.showDetail(scope.row.task_id)">
                        <el-icon class="me-1">
                            <View />
                        </el-icon>
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize" :total="total"
            @pagination="getList" />
    </div>

    <FinishTask ref="finishTaskRef" @refresh-list="getList" />
    <ExecuteFireActionTaskDetail ref="executeFireActionTaskDetailRef" />
</template>

<script setup>
import PageHeader from "@/components/PageHeader/index.vue";
import { CircleCheck, Refresh, Search, View } from "@element-plus/icons-vue";
import { acceptTask, completeTask, getMyTaskList } from "@/api/FireAction/MyTask.js";
import { TaskEnum } from "@/enum/TaskEnum.js";
import { getCurrentTime } from "@/utils/utils.js";
import { useTemplateRef } from "vue";
import FinishTask from "@/views/FireAction/MyTask/components/FinishTask.vue";
import ExecuteFireActionTaskDetail from "@/components/ExecuteFireAction/ExecuteFireActionTaskDetail.vue";
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance()
const { nj_recept_state } = proxy.useDict('nj_recept_state')

const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const searchTime = ref([])
const queryParams = ref({
    state: '',
    params: {
        'beginTime': '',
        'endTime': ''
    }
})
const tableData = ref([])

const queryParamsRef = useTemplateRef('queryParamsRef')
const finishTaskRef = useTemplateRef('finishTaskRef')
const executeFireActionTaskDetailRef = useTemplateRef('executeFireActionTaskDetailRef')

onMounted(() => {
    getList()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取列表数据
const getList = async () => {
    loading.value = true
    const res = await getMyTaskList(queryParams.value, paging.value)
    total.value = res.total
    tableData.value = res.rows
    loading.value = false
}

// 接收任务
const acceptTaskHandle = async (data) => {
    await acceptTask(data.task_id)
    await getList()
}

// 完成任务
const finishTaskHandle = async (data) => {
    await completeTask({
        taskId: data.task_id,
        // 任务处理时间
        handledate: getCurrentTime(),
        // 任务处理情况
        treatment: 'okok'
    })
}

// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    getList()
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = ''
    queryParams.value.params.endTime = ''
    await getList()
}

const handleDbClick = (row)=>{
    executeFireActionTaskDetailRef.value.showDetail(row.task_id)
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}</style>